<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 
        computed: {
            key: value
            
            1. value 是个函数
            2. value 是个提供了 get 与 set 的对象
        }

     -->

    <div id="app">
        <p>
            <input type="checkbox" v-model="isCheckAll"> 全选/反选
        </p>
        <ul>
            <li v-for="item in cartList" :key="item.goodId">
                <input type="checkbox" v-model="checkedIds" :value="item.goodId"> {{ item.goodName }}
            </li>
        </ul>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',

            data: {
                checkedIds: [], // 作用就是，存放勾选的 goodId
                cartList: [
                    { goodId: 1, goodName: '小米', goodPrice: 100, goodNum: 10 },
                    { goodId: 2, goodName: '华为', goodPrice: 200, goodNum: 20 }
                ],
            },
            
            computed: {
                // 是否全选
                // isCheckAll() {
                //     return this.checkedIds.length === this.cartList.length
                // }

                isCheckAll: {
                    get() {
                        return this.checkedIds.length === this.cartList.length
                    },

                    set(value) {
                        console.log(value)
                        if (value) {
                            // 全选
                            // this.checkedIds = ['a', 'b']
                            this.checkedIds = this.cartList.map(item => item.goodId)
                        } else {
                            // 反选
                            this.checkedIds = []
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>